<!--
 * @Description: 
 * @Author: Chen bi
 * @Date: 2022-09-14 21:01:13
 * @LastEditTime: 2022-09-18 16:24:19
 * @LastEditors: Chen bi
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <main>
            <section>
                <label for="shop">商品<input type="text" id="shop" v-model="shop"></label>
                <label for="num">数量<input type="text" id="num" v-model.number="num"></label>
                <label for="price">价格<input type="text" id="price" v-model.number="price"></label>
                <button @click="arr.push({shop,num,price})">添加到购物车</button>
            </section>
            <section>
                <p v-for="(v,index) in arr" :key="index">
                    {{v.shop}}的数量是{{v.num}},单价是{{v.price}},小计:{{v.num * v.price}}
                </p>
                <p>
                    总计：总数-----{{ total }},总价------{{ totalPrice }}
                </p>
            </section>
        </main>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                shop: '',
                num: '',
                price: '',
                arr: [
                    {
                        shop: '牙刷',
                        num: 5,
                        price: 10
                    },
                    {
                        shop: '牙膏',
                        num: 2,
                        price: 20
                    },
                    {
                        shop: '镜子',
                        num: 3,
                        price: 30
                    }
                ]
            },
            computed: {
                total() {
                    let total = 0;
                    this.arr.forEach(e => total += e.num);
                    return total
                },
                totalPrice() {
                    let price = 0;
                    this.arr.forEach(e => price += e.price * e.num);
                    return price
                }
            }
        })
    </script>
</body>

</html>